<header>
    <div class="topmenu grid ">
        <button class="switch"></button>
        <nav class="grid">
            <?php foreach (
                get_categories(array(
                    'taxonomy'   => 'category',
                    'hide_empty' => false, // Include empty categories
                    'orderby'    => 'name',
                    'order'      => 'ASC',
                )) as $vo
            ): ?>
                <?php if (intval($vo->parent) == 0): ?>
                    <a href="/category/<?= $vo->slug ?>"><?= $vo->name ?></a>
                <?php endif; ?>
            <?php endforeach; ?>
        </nav>
        <h1><a href="/"><?= get_bloginfo('name'); ?></a></h1>
        <img src="<?= blockPath('/imgs/menu.svg') ?>">
    </div>
</header>

<script data-name='plugin'>
    
    const menuIcon = document.querySelector("header > div.topmenu > img"),
          mbmenuList = document.querySelector("header > div.topmenu > nav");

    function createCloseButton() {
        const btnImgClose = document.createElement("a");
        btnImgClose.style.direction = 'rtl';
        btnImgClose.href = "javascript:void(0);";
        btnImgClose.innerHTML = `<img src="<?= blockPath('/imgs/close.svg') ?>" style="width:1.6rem;height:1.6rem;margin:2rem 2rem 0 0;">`;
        return btnImgClose;
    }

    if (menuIcon && mbmenuList) {
        menuIcon.addEventListener('click', () => {
            window.masker.show();
            const btnImgClose = createCloseButton();
            mbmenuList.prepend(btnImgClose);
            btnImgClose.addEventListener("click", function () {
                mbmenuList.classList.remove("active");
                btnImgClose.remove();
                window.masker.hide();
            });
            mbmenuList.classList.add("active");
        })

        if (window.masker.exists()) {
            window.masker.node().addEventListener("click", function () {
                mbmenuList.classList.remove("active");
                mbmenuList.querySelector("a>img").parentNode.remove();
                window.masker.hide();
            });
        }
    }


    // function onScrollEvent() {
    //     let lastScrollY = window.scrollY, diff = 0;
    //     const headerNode = document.querySelector("header");

    //     window.addEventListener("scroll", () => {
    //         if (window.scrollY < 50) {
    //             headerNode.classList.remove('fixed')
    //             return;
    //         }
    //         if (Math.abs(diff = window.scrollY - lastScrollY) > 50) {
    //             diff > 0 ? headerNode.classList.remove('fixed')
    //                 :headerNode.classList.add('fixed');
    //             lastScrollY = window.scrollY;
    //         }
    //     });
    // }
    // onScrollEvent();
</script>
<style>
    header {
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        background-color: var(--color-primary);
    }
    header>div.topmenu {
        grid-template-columns: 2rem auto 16rem;
        align-items: center;
    }

    header>div.topmenu>button {
        background: url(../girdtemp/imgs/sun.svg) no-repeat center center;
        background-size: 2rem 2rem;
        width: 2rem;
        height: 2rem;
    }

    header>div.topmenu>nav {
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
        justify-items: center;
        align-items: center;
    }

    header>div.topmenu>nav>a {
        width: 100%;
        font-weight: bold;
        text-align: center;
        line-height: 3rem;
        transition: var(--transition);
    }

    header>div.topmenu>nav>a:hover,
    header>div.topmenu>h1:hover {
        transform: scale(1.1);
    }

    header>div.topmenu>h1 {
        justify-self: end;
        transition: var(--transition);
    }

    header>div.topmenu>img {
        display: none;
        width: 2.2rem;
        height: 2.2rem;
    }

    @media (max-width: 1024px) {
        header>div.topmenu {
            grid-template-columns: 2rem auto 16rem
        }

        header>div.topmenu>nav {
            grid-column: 1/4;
        }

        header>div.topmenu>h1 {
            grid-column: 3/4;
            grid-row: 1/2
        }
    }

    @media (max-width: 768px) {
        header>div.topmenu {
            grid-template-columns: 2rem auto 2rem
        }

        header>div.topmenu>h1 {
            grid-column: 2/3;
            grid-row: 1/2
        }

        header>div.topmenu>img {
            grid-column: 3/4;
            grid-row: 1/2;
            display: block;
        }

        header>div.topmenu>nav {
            grid-column: auto;
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            grid-template-columns: auto;
            grid-template-rows: repeat(auto-fill, 3rem);
            z-index: 666;
            gap: calc(var(--gap) * .5);
            max-width: 70%;
            overflow: hidden;
            transition: all .4s;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        header>div.topmenu>nav.active {
            width: 20rem;
            height: 100vh;
        }

        header>div.topmenu>nav>a {
            color: white;
        }
    }
</style>